<template>
  <u-popup
    :show="showSelector"
    mode="bottom"
    :closeable="false"
    :close-on-click-overlay="true"
    @close="handleClose"
    bgColor="transparent"
  >
    <view class="number-selector">
      <!-- 顶部标题栏 -->
      <view class="selector-header">
        <view class="selector-header-center">
          <image
            :src="IMAGE_URL+'/static/master/timu.png'"
            style="width: 36rpx; height: 36rpx; margin-right: 6rpx"
          />
          <view class="header-title"
            >{{ currentNumber }}/{{ totalNumbers }}</view
          >
        </view>
        <view class="header-right">
          <u-icon
            name="close"
            size="20"
            color="#666"
            @click="handleClose"
          ></u-icon>
        </view>
      </view>

      <!-- 数字网格区域 -->
      <view class="number-grid">
        <view
          v-for="num in displayedNumbers"
          :key="num"
          class="number-item"
          :class="{
            selected: selectedNumbers.includes(num),

            disabled: num > totalNumbers,
          }"
          @click="handleNumberClick(num)"
        >
          <text class="number-text">{{ num }}</text>
        </view>
      </view>

     
    </view>
  </u-popup>
</template>

<script>
import appConfig from "@/config/app.js";
//  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  name: "NumberSelector",

  props: {
    // 控制弹窗显示
    value: {
      type: Boolean,
      default: false,
    },
    // 当前选中的数字
    currentNumber: {
      type: Number,
      default: 5,
    },
    // 总数字数量
    totalNumbers: {
      type: Number,
      default: 100,
    },
    // 每页显示的数字数量
    pageSize: {
      type: Number,
      default: 18,
    },
    // 已选中的数字数组
    selectedNumbers: {
      type: Array,
      default: () => [1, 2, 3, 4, 5],
    },
  },

  data() {
    return {
      IMAGE_URL: appConfig.IMAGE_URL,
      showSelector: false,
      currentPage: 1,
    };
  },

  computed: {
    // 总页数
    totalPages() {
      return Math.ceil(this.totalNumbers / this.pageSize);
    },

    // 当前页显示的数字数组
    displayedNumbers() {
      const startNum = (this.currentPage - 1) * this.pageSize + 1;
      const numbers = [];

      for (let i = 0; i < this.pageSize; i++) {
        const num = startNum + i;
        numbers.push(num);
      }

      return numbers;
    },

    // 当前页的起始和结束数字
    pageRange() {
      const start = (this.currentPage - 1) * this.pageSize + 1;
      const end = Math.min(this.currentPage * this.pageSize, this.totalNumbers);
      return { start, end };
    },
  },

  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        this.showSelector = newVal;
        if (newVal) {
          // 显示弹窗时，计算当前数字所在的页数
          this.currentPage = Math.ceil(this.currentNumber / this.pageSize);
        }
      },
    },

    showSelector(newVal) {
      this.$emit("input", newVal);
    },

    currentNumber(newVal) {
      // 当前数字变化时，自动跳转到对应页面
      this.currentPage = Math.ceil(newVal / this.pageSize);
    },
  },

  methods: {
    // 数字点击事件
    handleNumberClick(num) {
      if (num > this.totalNumbers) return;

      this.$emit("number-click", num);
      this.$emit("update:currentNumber", num);
    },

    // 上一页
    handlePrevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.$emit("page-change", this.currentPage);
      }
    },

    // 下一页
    handleNextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.$emit("page-change", this.currentPage);
      }
    },

    // 确定选择
    handleConfirm() {
      this.$emit("confirm", this.currentNumber);
      this.handleClose();
    },

    // 关闭弹窗
    handleClose() {
      this.showSelector = false;
      this.$emit("close");
    },

    // 跳转到指定页数
    gotoPage(pageNum) {
      if (pageNum >= 1 && pageNum <= this.totalPages) {
        this.currentPage = pageNum;
        this.$emit("page-change", pageNum);
      }
    },

    // 跳转到指定数字
    gotoNumber(number) {
      if (number >= 1 && number <= this.totalNumbers) {
        this.$emit("number-click", number);
        this.$emit("update:currentNumber", number);
      }
    },

    // 添加选中数字
    addSelectedNumber(num) {
      if (num <= this.totalNumbers && !this.selectedNumbers.includes(num)) {
        const newSelected = [...this.selectedNumbers, num];
        this.$emit("update:selectedNumbers", newSelected);
      }
    },

    // 移除选中数字
    removeSelectedNumber(num) {
      const newSelected = this.selectedNumbers.filter((n) => n !== num);
      this.$emit("update:selectedNumbers", newSelected);
    },

    // 清空选中数字
    clearSelectedNumbers() {
      this.$emit("update:selectedNumbers", []);
    },
  },
};
</script>

<style lang="scss" scoped>
.number-selector {
  width: 100%;

  padding: 40rpx 32rpx 0 32rpx;
  box-sizing: border-box;

  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 16%);
  border-radius: 28rpx 28rpx 0rpx 0rpx;
}

.selector-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60rpx;
  position: relative;
  .selector-header-center {
    display: flex;
    align-items: center;
  }

  .header-left {
    font-weight: 500;
    font-size: 36rpx;
    color: #333333;
  }
  .header-right {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    ::v-deep .u-icon {
      color: #333;
    }
  }

  .header-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    flex: 1;
    text-align: center;
  }
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 54rpx;
  margin-bottom: 54rpx;
  min-height: 300rpx;

  .number-item {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 2rpx solid #999999;
    transition: all 0.3s ease;
    position: relative;

    // 已选中的数字样式（橙色）
    &.selected {
      background-color: #ffab21;
      border-color: #ffab21;

      .number-text {
        color: white;
      }
    }

    // 当前数字样式
    &.current {
      background-color: #007aff;
      border-color: #007aff;
      transform: scale(1.1);
      box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);

      .number-text {
        color: white;
        font-weight: bold;
      }
    }

    // 禁用状态（超过总数）
    &.disabled {
      background-color: #fafafa;
      border-color: #f0f0f0;
      cursor: not-allowed;

      .number-text {
        color: #ccc;
      }
    }

    // 点击效果
    &:active:not(.disabled) {
      transform: scale(0.95);
    }

    .number-text {
      font-size: 28rpx;
      color: #666;
      font-weight: 500;
    }
  }
}

.selector-footer {
  display: flex;
  justify-content: space-between;
  gap: 15rpx;

  .footer-btn {
    flex: 1;
    height: 70rpx;
    border-radius: 35rpx;
    font-size: 26rpx;

    ::v-deep .u-btn {
      border: none;

      &.prev-btn {
        background-color: #f5f5f5;
        color: #666;

        &.u-btn--disabled {
          background-color: #fafafa;
          color: #ccc;
        }
      }

      &.next-btn {
        background: linear-gradient(135deg, #007aff, #0056cc);
        color: white;

        &.u-btn--disabled {
          background: #ccc;
        }
      }

      &.confirm-btn {
        background: linear-gradient(135deg, #4caf50, #45a049);
        color: white;
      }
    }
  }
}
</style>
